<template>
  <div class="productProNew">
    <div class="title"><h1><span>添加</span></h1></div>
    <form name="newContent" class="basicInfor">
      <div class="form-group required">
        <label :for="'name'+$attrs.text">旅行社名称：</label>
        <input autocomplete="off" type="text" class="form-control proName" :id="'name'+$attrs.text" placeholder="请输入旅行社名称" required v-model="traveladds.name" />
      </div>
      <div class="form-group required">
        <label class="destxt" :for="'rank'+$attrs.text">旅行社级别：</label>
        <input autocomplete="off" type="number" min="1" max="5" class="form-control proName" :id="'rank'+$attrs.text" placeholder="请输入等级" required v-model="traveladds.rank" />
        <span class="g-tips">（请填写1~5之间的整数）</span>
      </div>
      <div class="form-group required">
        <label class="destxt" :for="'contactsName'+$attrs.text">联系人姓名：</label>
        <input autocomplete="off" type="text" class="form-control proName" :id="'contactsName'+$attrs.text" placeholder="请输入联系人姓名" required v-model="traveladds.contactsName" />
      </div>
      <div class="form-group required">
        <label class="destxt" :for="'contactsMobile'+$attrs.text">联系人电话：</label>
        <input autocomplete="off" type="number" min="1" class="form-control proName" :id="'contactsMobile'+$attrs.text" placeholder="请输入联系人电话" required v-model="traveladds.contactsMobile" />
      </div>
      <div class="form-group">
        <label class="destxt" :for="'demo'+$attrs.text">备注：</label>
        <textarea class="form-control proDes" :id="'demo'+$attrs.text" rows="6" placeholder="请输入备注信息" v-model="traveladds.demo"></textarea>
      </div>
      <button type="button" class="btn btn-info confirmBtn" @click="submitPro()">提交</button>
    </form>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        Http:'',
        arealistUrl:'', // 地址
        traveladds:{
          name:'',
          rank: '',
          contactsName: '',
          contactsMobile: '',
          demo: ''
        }
      }
    },
    computed:{
      travelAdd(){//
        return this.$store.state.interface.addtravelGency;
      }
    },
    components:{},
    methods:{
      submitPro(){ //提交判断是否信息完整
        let self = this;
        let isMobile = /^(13|14|15|17|18)\d{9}$/
        if (self.traveladds.name === '') {
          layer.msg('请填写旅行社名称！');
          return false
        }
        if (self.traveladds.rank === '') {
          layer.msg('请填写等级！');
          return false
        }
        if (isNaN(self.traveladds.rank * 1)) {
          layer.msg('等级应为1~5的数字！');
          return false
        }
        if (self.traveladds.contactsName === '') {
          layer.msg('请填写联系人姓名！');
          return false
        }
        if (!isMobile.test(self.traveladds.contactsMobile)) {
          layer.msg('请填写11位有效手机号');
          return false
        }

        let formData =new FormData(); // 基础信息表单数据
        formData.append('name', self.traveladds.name);
        formData.append('rank', self.traveladds.rank);
        formData.append('contactsName', self.traveladds.contactsName);
        formData.append('contactsMobile', self.traveladds.contactsMobile);
        formData.append('demo', self.traveladds.demo);

        self.$ajax.post(self.Http,formData).then(function(res) {
          let result = res.data.result || '';
          if(res.data.code === '10000' && result.WbTravelGency){
            layer.msg('添加成功！');
            self.traveladds = {};
          }else{
            self.codes(res.data.code);
            layer.msg('添加失败！');
          }
        },function(res) {
          layer.msg('添加失败！');
        });
      }
    },
    beforeMount(){
      let self = this;
      let url = self.travelAdd;
      let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
      self.Http =`${url}?sid=${sessionId}`;
      // 调用获取数据函数port()
      // this.port();

    },
    mounted(){
      let self = this;
      $("#acceptTime").datepicker({
        showAnim: 'fadeIn',
        nextText : '下一月',
        prevText : '上一月',
        showButtonPanel: true,
        currentText : '今天',
        gotoCurrent : false,
        onSelect: function (dateText, inst) {
          $("#acceptTime").datepicker("option", dateText);
          self.traveladds.acceptTime = dateText;
        },
      });
      $("#dispatchTime").datepicker({
        showAnim: 'fadeIn',
        nextText : '下一月',
        prevText : '上一月',
        showButtonPanel: true,
        currentText : '今天',
        gotoCurrent : false,
        onSelect: function (dateText, inst) {
          $("#dispatchTime").datepicker("option", dateText);
          self.traveladds.dispatchTime = dateText;
        },
      });

    }
  }
</script>
<style lang="scss" scoped>
  form{
    display:block;
  }
  .title{
    color:#4e5e7e;
  }
  .form-control.like-textarea, .form-control.proDes, .form-group .mainImg{
    width: 70%;
  }
  .g-tips{margin-left:10px;color:#999;}
</style>
